React Concurrent Mode: Mestring av avbrytbar rendering for forbedrede brukeropplevelser

            // Se for deg en fetchData-funksjon som returnerer et Promise
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// En hypotetisk Suspense-aktivert datahentings-hook
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // Dette er hva Suspense fanger opp
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // Dette kallet kan suspendere
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

2. Automatisk 'batching'

Batching er prosessen med å gruppere flere tilstandsoppdateringer i en enkelt re-render. Tradisjonelt sett har React bare batchet oppdateringer som skjedde innenfor hendelseshåndterere (event handlers). Oppdateringer initiert utenfor hendelseshåndterere (f.eks. i promises eller `setTimeout`) ble ikke batchet, noe som førte til unødvendige re-renders.

Hvordan det fungerer med concurrency: Med Concurrent Mode batcher React automatisk alle tilstandsoppdateringer, uavhengig av hvor de stammer fra. Dette betyr at hvis du har flere tilstandsoppdateringer som skjer raskt etter hverandre (f.eks. fra flere asynkrone operasjoner som fullføres), vil React gruppere dem og utføre en enkelt re-render, noe som forbedrer ytelsen og reduserer overbelastningen fra flere renderingssykluser.

Eksempel: Anta at du henter data fra to forskjellige API-er. Når begge er fullført, oppdaterer du to separate deler av tilstanden. I eldre React-versjoner kunne dette utløse to re-renders. I Concurrent Mode blir disse oppdateringene batchet, noe som resulterer i en enkelt, mer effektiv re-render.

3. 'Transitions' (Overganger)

Transitions er et nytt konsept introdusert for å skille mellom presserende og ikke-presserende oppdateringer. Dette er en kjernemekanisme for å muliggjøre avbrytbar rendering.

Presserende oppdateringer: Dette er oppdateringer som krever umiddelbar tilbakemelding, som å skrive i et input-felt, klikke på en knapp, eller manipulere UI-elementer direkte. De skal føles øyeblikkelige.

Transition-oppdateringer: Dette er oppdateringer som kan ta lengre tid og ikke krever umiddelbar tilbakemelding. Eksempler inkluderer rendering av en ny side etter å ha klikket på en lenke, filtrering av en stor liste, eller oppdatering av relaterte UI-elementer som ikke reagerer direkte på et klikk. Disse oppdateringene kan avbrytes.

Hvordan det fungerer med concurrency: Ved å bruke `startTransition`-APIet, kan du merke visse tilstandsoppdateringer som 'transitions'. Reacts planlegger vil da behandle disse oppdateringene med lavere prioritet og kan avbryte dem hvis en mer presserende oppdatering skjer. Dette sikrer at mens en ikke-presserende oppdatering (som rendering av en stor liste) pågår, blir presserende oppdateringer (som å skrive i et søkefelt) prioritert, og holder brukergrensesnittet responsivt.

Globalt eksempel: Tenk på en nettside for reisebestilling. Når en bruker velger et nytt reisemål, kan det utløse en kaskade av oppdateringer: henting av flydata, oppdatering av hotelltilgjengelighet og rendering av et kart. Hvis brukeren umiddelbart bestemmer seg for å endre reisedatoene mens de opprinnelige oppdateringene fortsatt behandles, lar `startTransition`-APIet React pause fly-/hotelloppdateringene, behandle den presserende datoendringen, og deretter potensielt gjenoppta eller re-initiere fly-/hotellhentingen basert på de nye datoene. Dette forhindrer at brukergrensesnittet fryser under den komplekse oppdateringssekvensen.

Kodeeksempel (Illustrativt):

            import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Merk denne oppdateringen som en 'transition'
    startTransition(() => {
      // Simuler henting av resultater, dette kan avbrytes
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

            

              
                Copy
              
            
          

4. Biblioteker og økosystemintegrasjon

Fordelene med Concurrent Mode er ikke begrenset til Reacts kjernefunksjoner. Hele økosystemet tilpasser seg. Biblioteker som samhandler med React, som rutingløsninger eller verktøy for tilstandshåndtering, kan også utnytte concurrency for å gi en jevnere opplevelse.

Eksempel: Et rutingbibliotek kan bruke 'transitions' for å navigere mellom sider. Hvis en bruker navigerer bort før den nåværende siden er ferdig rendret, kan rutingoppdateringen sømløst avbrytes eller kanselleres, og den nye navigasjonen kan få forrang. Dette sikrer at brukeren alltid ser den mest oppdaterte visningen de hadde til hensikt å se.

Hvordan aktivere og bruke concurrent-funksjoner

Selv om Concurrent Mode er et grunnleggende skifte, er det generelt enkelt å aktivere funksjonene, og det krever ofte minimale kodeendringer, spesielt for nye applikasjoner eller ved adopsjon av funksjoner som Suspense og Transitions.

1. React-versjon

Concurrent-funksjoner er tilgjengelige i React 18 og nyere. Sørg for at du bruker en kompatibel versjon:

            npm install react@latest react-dom@latest
            

              
                Copy
              
            
          

2. Root API (`createRoot`)

Den primære måten å velge å bruke concurrent-funksjoner på er ved å bruke det nye `createRoot`-APIet når du monterer applikasjonen din:

            // index.js eller main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

            

              
                Copy
              
            
          

Bruk av `createRoot` aktiverer automatisk alle concurrent-funksjoner, inkludert automatisk batching, transitions og Suspense.

Merk: Det eldre `ReactDOM.render`-APIet støtter ikke concurrent-funksjoner. Migrering til `createRoot` er et nøkkelsteg for å låse opp concurrency.

3. Implementering av Suspense

Som vist tidligere, implementeres Suspense ved å omslutte komponenter som utfører asynkrone operasjoner med en <Suspense>-grense og gi en fallback-prop.

Beste praksis:

• Nest <Suspense>-grenser for å håndtere lastetilstander granulært.
• Bruk tilpassede hooks som integreres med Suspense for renere datahentingslogikk.
• Vurder å bruke biblioteker som Relay eller Apollo Client, som har førsteklasses støtte for Suspense.

4. Bruk av Transitions (`startTransition`)

Identifiser ikke-presserende UI-oppdateringer og omslutt dem med startTransition.

Når skal det brukes:

• Oppdatering av søkeresultater etter at en bruker har skrevet.
• Navigering mellom ruter.
• Filtrering av store lister eller tabeller.
• Lasting av tilleggsdata som ikke umiddelbart påvirker brukerinteraksjon.

Eksempel: For kompleks filtrering av et stort datasett som vises i en tabell, ville du satt filterspørringstilstanden og deretter kalt startTransition for selve filtreringen og re-renderingen av tabellradene. Dette sikrer at hvis brukeren raskt endrer filterkriteriene igjen, kan den forrige filtreringsoperasjonen trygt avbrytes.

Fordeler med avbrytbar rendering for et globalt publikum

Fordelene med avbrytbar rendering og Concurrent Mode forsterkes når man vurderer en global brukerbase med ulike nettverksforhold og enhetskapasiteter.

• Forbedret oppfattet ytelse: Selv på tregere tilkoblinger eller mindre kraftige enheter forblir brukergrensesnittet responsivt. Brukere opplever en kvikkere applikasjon fordi kritiske interaksjoner aldri blokkeres over lengre tid.
• Forbedret tilgjengelighet: Ved å prioritere brukerinteraksjoner blir applikasjoner mer tilgjengelige for brukere som er avhengige av hjelpeteknologier eller som kan ha kognitive svekkelser som drar nytte av et konsekvent responsivt grensesnitt.
• Redusert frustrasjon: Globale brukere, som ofte opererer på tvers av forskjellige tidssoner og med varierende tekniske oppsett, verdsetter applikasjoner som ikke fryser eller henger. En jevn UX fører til høyere engasjement og tilfredshet.
• Bedre ressursstyring: På mobile enheter eller eldre maskinvare, hvor CPU og minne ofte er begrenset, lar avbrytbar rendering React effektivt håndtere ressurser, og pauser ikke-essensielle oppgaver for å gi plass til kritiske.
• Konsekvent opplevelse på tvers av enheter: Enten en bruker er på en high-end stasjonær PC i Silicon Valley eller en budsjett-smarttelefon i Sørøst-Asia, kan kjernereponsiviteten til applikasjonen opprettholdes, og bygge bro over gapet i maskinvare- og nettverkskapasiteter.

Tenk på en språkopplæringsapp som brukes av studenter over hele verden. Hvis en student laster ned en ny leksjon (en potensielt lang oppgave) mens en annen prøver å svare på et raskt vokabularspørsmål, sikrer avbrytbar rendering at vokabularspørsmålet besvares umiddelbart, selv om nedlastingen pågår. Dette er avgjørende for pedagogiske verktøy der umiddelbar tilbakemelding er avgjørende for læring.

Potensielle utfordringer og hensyn

Selv om Concurrent Mode gir betydelige fordeler, innebærer adopsjonen også en læringskurve og noen hensyn:

• Feilsøking: Feilsøking av asynkrone og avbrytbare operasjoner kan være mer utfordrende enn å feilsøke synkron kode. Å forstå flyten av utførelse og når oppgaver kan bli pauset eller gjenopptatt krever nøye oppmerksomhet.
• Endring i mental modell: Utviklere må justere tankegangen sin fra en rent sekvensiell utførelsesmodell til en mer samtidig, hendelsesdrevet tilnærming. Å forstå implikasjonene av startTransition og Suspense er nøkkelen.
• Eksterne biblioteker: Ikke alle tredjepartsbiblioteker er oppdatert til å være 'concurrency-aware'. Bruk av eldre biblioteker som utfører blokkerende operasjoner kan fortsatt føre til at brukergrensesnittet fryser. Det er viktig å sikre at avhengighetene dine er kompatible.
• Tilstandshåndtering: Selv om Reacts innebygde concurrency-funksjoner er kraftige, kan komplekse tilstandshåndteringsscenarioer kreve nøye vurdering for å sikre at alle oppdateringer håndteres korrekt og effektivt innenfor det samtidige paradigmet.

Fremtiden for React Concurrency

Reacts reise inn i concurrency er pågående. Teamet fortsetter å finpusse planleggeren, introdusere nye APIer og forbedre utvikleropplevelsen. Funksjoner som Offscreen API (som lar komponenter bli rendret uten å påvirke den bruker-oppfattede UI-en, nyttig for forhåndsrendering eller bakgrunnsoppgaver) utvider ytterligere mulighetene for hva som kan oppnås med samtidig rendering.

Ettersom nettet blir stadig mer komplekst og brukernes forventninger til ytelse og responsivitet fortsetter å stige, blir samtidig rendering ikke bare en optimalisering, men en nødvendighet for å bygge moderne, engasjerende applikasjoner som imøtekommer et globalt publikum.

Konklusjon

React Concurrent Mode og dets kjernekonsept om avbrytbar rendering representerer en betydelig evolusjon i hvordan vi bygger brukergrensesnitt. Ved å la React pause, gjenoppta og prioritere renderingsoppgaver, kan vi lage applikasjoner som ikke bare er ytelsessterke, men også utrolig responsive og motstandsdyktige, selv under tung belastning eller i begrensede miljøer.

For et globalt publikum betyr dette en mer rettferdig og fornøyelig brukeropplevelse. Enten brukerne dine får tilgang til applikasjonen din fra en høyhastighets fiberforbindelse i Europa eller et mobilnettverk i et utviklingsland, hjelper Concurrent Mode med å sikre at applikasjonen din føles rask og flytende.

Å omfavne funksjoner som Suspense og Transitions, og å migrere til det nye Root API, er avgjørende skritt for å låse opp det fulle potensialet til React. Ved å forstå og anvende disse konseptene kan du bygge neste generasjons webapplikasjoner som virkelig gleder brukere over hele verden.

Viktige punkter:

• Reacts Concurrent Mode muliggjør avbrytbar rendering, og bryter fri fra synkron blokkering.
• Funksjoner som Suspense, automatisk batching og Transitions er bygget på dette samtidige grunnlaget.
• Bruk createRoot for å aktivere concurrent-funksjoner.
• Identifiser og merk ikke-presserende oppdateringer med startTransition.
• Samtidig rendering forbedrer UX betydelig for globale brukere, spesielt under varierte nettverksforhold og på forskjellige enheter.
• Hold deg oppdatert med Reacts utviklende concurrency-funksjoner for optimal ytelse.

Start å utforske Concurrent Mode i prosjektene dine i dag og bygg raskere, mer responsive og mer herlige applikasjoner for alle.